<template>
	<view>
			<custom-ui bgColor="bg-gradual-orange" :isBack="true">
				<block slot="content">搜索</block>
			</custom-ui>
			<view class="searchbar">
					<text></text>
					<input  class="search1" type="text" placeholder="搜索音乐 / 歌词"></input>
				</view>
				
			
			
			
		<view class="flex flex-column  ">	
		<view class="font" >历史</view>
		<view  class="font "  >热搜榜</view>
		
		<!-- <search @handleSearch="searchMusic" :text="text"></search>
		<scroll-view scroll-y class="content-list" scroll-with-animation>
			<history-search @chooseMusic="chooseMusic"></history-search>
			<hot-search @chooseMusic="chooseMusic"></hot-search>
		</scroll-view> -->
		
		</view>	
		
		
		
		<view class="bigBox flex justify-around flex-wrap  ">
		
		<view class="songListItem flex box "   v-for="(item,index) in songList" :key='item.id'>
			<view class="flex align-center" style="width: 40px;">{{index+1}}</view>
			<view >
				<view class="title justify-center align-center">{{item.name}}</view>
			</view>
		</view>
	</view>
	</view>
</template>



<script>
	export default {
		searchdata:function(){
			return{
				tosearch:[
					
				]
			}
		},
		data:function(){
			return {
				songList:[
				]
			}
		},
		methods:{
			getListHandel(param){
				uni.request({
				    url: 'https://autumnfish.cn/top/playlist/detail', //仅为示例，并非真实接口地址。
				    data:{cat:param},
				    success: (res) => {
				        console.log(res.data);
						this.songList=res.data.playlists
				    }
				});
			},
			 open(){
			            this.$refs.calendar.open();
			        },
			        confirm(e) {
			            console.log(e);
			        }
		},
		onLoad(){
			this.getListHandel()
		}
		
		}
		
	 
</script>

<style lang="scss">
.flex{
	display: flex;
	&-column{
		flex-direction: column;
	}
	&-wrap{
		flex-wrap: wrap;
	}
}

.justify{
	&-center{
		justify-content: center;
	}
	&-around{
		justify-content: space-around;
	}
	&-between{
		justify-content: space-between;
	}
}
.align-center{
	align-items: center;
}
.bigBox{
	
}
.item{
	width: 70px;
	
	image{
		width: 40px;
		height: 40px;
	}
	text{
		font-size: 12px;
	}
}
.songListItem{
	.listNo{
		width: 30px;
		border: 1px solid #F0AD4E;
	}
}
.box{
	margin-top: 10px;
	width: 43%;
	height: 35px;
	background-color:#FFFFFF ;
}
.bg{
	background-color:#007AFF;
	
}
.search1{
	width: 240px;
	height: 35px;
	border: none;
	outline: none;
	font-size: 16px;
	color: #007AFF;
	margin-left:10px ;
	;
}
.font{
	font-weight: bold;
	margin-left: 15px;
	font-size: 14px;
	margin-bottom: 8px;
   
}
.searchbar{
	border: #333333 solid 1px;
	border-radius:2em ;
	width:90%;
	height: 37px;
	box-shadow: 0px,0px,5px #C0C0C0;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

</style>
